<template>
  <div class="box">
    <top></top>
    <menus class="caidan_m"></menus>
    <div class="mine">
      <div class="w1398">
        <menus class="caidan_p"></menus>
        <div class="right">
          <h2>我要举报</h2>
          <p>当您发现搜索结果中存在欺诈，作弊，钓鱼，山寨等页面时，您可以对其进行举报。提交举报信息后工作人员将对您提供的数据进行审核处理，处理时间为5~7个工作日。核实举报信息后，搜狗搜索将对作弊欺诈网站进行严厉处罚。为了维护公民的合法权益，有关诈骗、售卖假货、盗用原创等相关内容，建议您通过互联网违法和不良信息举报中心进行相关维权。</p>
          <p>
            请填写您的真实信息
            <span>（以下为必填项）</span>：
          </p>
          <div class="username">
            <label for>联系姓名：</label>
            <input type="text" placeholder="字数控制在6个字以内" id="username" v-model="username" />
          </div>
          <span class="icon_username icon">
            <i></i>联系姓名输入不合法
          </span>
          <div class="usertel">
            <label for>联系方式：</label>
            <input type="text" placeholder="手机号/邮箱" id="usertel" v-model="usertel" />
          </div>
          <span class="icon_usertel icon">
            <i></i>联系方式输入不合法
          </span>
          <p class="xinxi">
            请填写具体举报信息
            <span>（以下为必填项）</span>：
          </p>
          <div class="content">
            <label for class="fl">举报原因：</label>
            <textarea
              name
              id="cause"
              cols="30"
              rows="10"
              class="fl"
              placeholder="请简单介绍您的网站，字数请控制在24字以内"
              v-model="cause"
            ></textarea>
          </div>
          <span class="icon_cause icon">
            <i></i>举报原因输入不合法
          </span>
          <div class="www">
            <label for>举报网址：</label>
            <input type="text" placeholder="http://www.zhongyi9999.com" id="url" v-model="url" />
          </div>
          <span class="icon_url icon">
            <i></i>举报网址输入不合法
          </span>
          <div class="data">
            <label for>举报资料上传：</label>
            <div class="file">
              上传
              <input id="file" type="file" value="上传" />
            </div>
            <span>请上传小于600k, jpg、png格式图片</span>
          </div>
          <span class="icon_file icon">
            <i></i>请上传举报资料
          </span>
          <img id="showImg" src alt />
          <div class="code">
            <label for>验证码：</label>
            <div class="verify-wrap" id="verify-wrap"></div>
          </div>
          <div class="confirm">
            <button id="btn" disabled="disabled" @click="submit">确定提交</button>
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>
<script>
</script>

<script>
import top from "@/components/top.vue";
import foot from "@/components/foot.vue";
import menus from "@/components/com/menus.vue";
export default {
  components: {
    top,
    foot,
    menus
  },
  data() {
    return {
      username: "",
      usertel: "",
      url: "",
      cause: "",
      usernameFlag: false,
      usertelFlag: false,
      uslFlag: false,
      causeFlag: false,
      imageBase64: ""
    };
  },
  created() {
    // 验证码
    $(function() {
      // console.log(parseFloat("1px"));

      var SlideVerifyPlug = window.slideVerifyPlug;
      // 获取屏幕宽度
      var cw = document.body.clientWidth;
      // console.log(cw);
      // PC端
      if (cw > 600) {
        var slideVerify = new SlideVerifyPlug("#verify-wrap", {
          wrapWidth: "350", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
          initText: "请按住滑块，向右拖动", //设置  初始的 显示文字
          sucessText: "验证通过", //设置 验证通过 显示的文字
          getSucessState: function(res) {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
            console.log(res);
            if (res) {
              $("#btn").css("background", "rgba(76, 180, 247, 1)");
              $("#btn").attr("disabled", false);
              // console.log($("#file").val());
            }
          }
        });
      } else {
        var slideVerify = new SlideVerifyPlug("#verify-wrap", {
          wrapWidth: "200", //设置 容器的宽度 ，默认为 350 ，也可不用设，你自己css 定义好也可以，插件里面会取一次这个 容器的宽度
          initText: "请按住滑块，向右拖动", //设置  初始的 显示文字
          sucessText: "验证通过", //设置 验证通过 显示的文字
          getSucessState: function(res) {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
            // console.log(res);
            if (res) {
              $("#btn").css("background", "rgba(76, 180, 247, 1)");
              $("#btn").attr("disabled", false);
            }
          }
        });
      }

      $("#resetBtn").on("click", function() {
        slideVerify.resetVerify(); //可以重置 插件 回到初始状态
      });
      $("#getState").on("click", function() {
        alert(slideVerify.slideFinishState); //这个可以拿到 当前验证状态  是否完成
      });
      var slideVerify2 = new SlideVerifyPlug("#verify-wrap2", {
        wrapWidth: "300",
        initText: "请按住滑块",
        sucessText: "验证通过"
      });
      $("#resetBtn2").on("click", function() {
        slideVerify2.resetVerify();
      });
      $("#getState2").on("click", function() {
        alert(slideVerify2.slideFinishState);
      });
    });
    (function(global, factory) {
      typeof exports === "object" && typeof module !== "undefined"
        ? (module.exports = factory())
        : typeof define === "function" && define.amd
        ? define(factory)
        : (window.slideVerifyPlug = factory());
    })(this, function() {
      "use strict";

      var SlideVerify = function(ele, opt) {
        this.$ele = $(ele);
        //默认参数
        this.defaults = {
          wrapWidth: "350",
          initText: "请按住滑块，拖动到最右边",
          sucessText: "验证通过",
          getSucessState: function() {}
        };

        this.settings = $.extend({}, this.defaults, opt);
        this.touchX = 0;
        this.slideFinishState = false;
        this.init();
      };
      SlideVerify.prototype = {
        constructor: SlideVerify,
        init: function() {
          var _this = this;
          _this.initDom();
          _this.initStyle();
          _this.initEle();
          _this._mousedown();
          _this._mouseup();
          _this._touchstart();
          _this._touchmove();
          _this._touchend();
        },
        initDom: function() {
          var html = $(
            '<div class="drag-progress dragProgress">' +
              "</div>" +
              '<span class="drag-btn dragBtn">' +
              "</span>" +
              '<span class="fix-tips fixTips">' +
              this.settings.initText +
              "</span>" +
              '<span class="verify-msg sucMsg">' +
              this.settings.sucessText +
              "</span>"
          );
          this.$ele.append(html);
        },
        initStyle: function() {
          this.$ele.css({
            width: this.settings.wrapWidth
          });
        },
        initEle: function() {
          this.slideBtn = this.$ele.find(".dragBtn");
          this.slideProEle = this.$ele.find(".dragProgress");
          this.slideSucMsgEle = this.$ele.find(".sucMsg");
          this.slideFixTipsEle = this.$ele.find(".fixTips");
          this.maxSlideWid = this.calSlideWidth();
        },
        _mousedown: function() {
          var _this = this;

          _this.slideBtn.on("mousedown", function(e) {
            var distenceX = e.pageX;
            e.preventDefault();
            if (_this.ifSlideRight() || _this.ifAnimated()) {
              return false;
            }
            $(document).mousemove(function(e) {
              var curX = e.pageX - distenceX;
              if (curX >= _this.maxSlideWid) {
                _this.setDragBtnSty(_this.maxSlideWid);
                _this.setDragProgressSty(_this.maxSlideWid);
                _this.cancelMouseMove();
                _this.slideFinishState = true;
                //				    	$("#verify-msg").text('验证通过');
                if (_this.settings.getSucessState) {
                  _this.settings.getSucessState(_this.slideFinishState);
                }
                _this.successSty();
              } else if (curX <= 0) {
                _this.setDragBtnSty("0");
                _this.setDragProgressSty("0");
              } else {
                _this.setDragBtnSty(curX);
                _this.setDragProgressSty(curX);
              }
            });
            $(document).mouseup(function() {
              _this.cancelMouseMove();
            });
          });
        },
        _mouseup: function() {
          var _this = this;
          $(document).on("mouseup", function() {
            if (_this.ifSlideRight()) {
              _this.cancelMouseMove();
              return false;
            } else {
              _this.failAnimate();
            }
          });
        },
        _touchstart: function() {
          var _this = this;
          _this.slideBtn.on("touchstart", function(e) {
            _this.touchX = e.originalEvent.targetTouches[0].pageX;
            if (_this.ifSlideRight() || _this.ifAnimated()) {
              //					_this.cancelTouchmove();
              return false;
            }
          });
        },
        _touchmove: function() {
          var _this = this;
          _this.slideBtn.on("touchmove", function(e) {
            e.preventDefault();
            var curX = e.originalEvent.targetTouches[0].pageX - _this.touchX;
            if (curX >= _this.maxSlideWid) {
              _this.setDragBtnSty(_this.maxSlideWid);
              _this.setDragProgressSty(_this.maxSlideWid);
              _this.cancelTouchmove();
              _this.successSty();
              _this.slideFinishState = true;
              if (_this.settings.getSucessState) {
                _this.settings.getSucessState(_this.slideFinishState);
              }
              _this.slideFinishState = true;
            } else if (curX <= 0) {
              _this.setDragBtnSty("0");
              _this.setDragProgressSty("0");
            } else {
              _this.setDragBtnSty(curX);
              _this.setDragProgressSty(curX);
            }
          });
        },
        _touchend: function() {
          var _this = this;
          _this.slideBtn.on("touchend", function() {
            if (_this.ifSlideRight()) {
              _this.cancelTouchmove();
              return false;
            } else {
              _this.failAnimate();
            }
          });
        },
        getDragBtnWid: function() {
          //获取滑块的宽度，
          return parseFloat(this.slideBtn.outerWidth());
        },
        getDragWrapWid: function() {
          //获取  本容器的的宽度，以防万一
          return parseFloat(this.$ele.outerWidth());
        },
        calSlideWidth: function() {
          var _this = this;
          return _this.getDragWrapWid() - _this.getDragBtnWid();
        },
        ifAnimated: function() {
          //判断 是否动画状态
          return this.slideBtn.is(":animated");
        },
        getDragBtnLeft: function() {
          //判断当前 按钮 离左侧的距离
          return parseInt(this.slideBtn.css("left"));
        },
        ifSlideRight: function() {
          var _this = this;
          if (_this.getDragBtnLeft() == _this.calSlideWidth()) {
            return true;
          } else {
            return false;
          }
        },
        setDragBtnSty: function(left) {
          this.slideBtn.css({
            left: left
          });
        },
        setDragProgressSty: function(wid) {
          this.slideProEle.css({
            width: wid
          });
        },
        cancelMouseMove: function() {
          $(document).off("mousemove");
        },
        cancelTouchmove: function() {
          this.slideBtn.off("touchmove");
        },
        successSty: function() {
          this.slideSucMsgEle.show();
          this.slideBtn.addClass("suc-drag-btn");
        },
        failAnimate: function() {
          this.slideBtn.animate(
            {
              left: "-1px"
            },
            200
          );
          this.slideProEle.animate(
            {
              width: 0
            },
            200
          );
        },
        resetVerify: function() {
          this.slideSucMsgEle.hide();
          this.slideBtn.removeClass("suc-drag-btn");
          this.slideFinishState = false;
          this.slideProEle.css({
            width: 0
          });
          this.slideBtn.css({
            left: "-1px"
          });
          this._touchmove();
        }
      };
      var inlineCss =
        "*{margin:0;padding:0;box-sizing:border-box}.verify-wrap{width:350px;height:40px;background-color:#e5e5e5;border:1px solid #e0e0e0;margin:5px auto;position:relative}.verify-wrap .drag-btn{position:absolute;left:-1px;top:-1px;width:50px;height:40px;background:#fff url() no-repeat center center;background-size:100% 100%;z-index:2;cursor:move;}.verify-wrap .suc-drag-btn{background:#fff url() no-repeat center center;background-size:100% 100%}.verify-wrap .drag-progress{position:absolute;left:0;top:-1px;height:40px;border-top:1px solid #7ac23c;border-top:1px solid #7ac23c;width:0;background-color:#7ac23c;color:#fff;font-size:18px;text-align:center;line-height:40px}.verify-wrap .fix-tips,.verify-msg{width:100%;position:absolute;right:0;left:1px;height:100%;color:#51555c;z-index:1;line-height:38px;font-size:12px;text-align:center}.verify-wrap .verify-msg{background-color:#7ac23c;color:#fff;display:none}";
      var styleObj = $('<style type="text/css">' + inlineCss + "</style>");
      $("head").prepend(styleObj);

      var slideVerify = window.slideVerifyPlug || SlideVerify;

      return slideVerify;
    });
  },
  mounted() {
    // $("#btn").click(function() {
    //   console.log(666);
    // });
    var that = this;
    $("#file").on("change", function(e) {
      var filePath = $(this).val();
      console.log(filePath);
      var fileFormat = filePath
        .substring(filePath.lastIndexOf("."))
        .toLowerCase(); //获取文件后缀名
      //检查后缀名
      if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        alert("文件格式必须为：png/jpg/jpeg"); //showError是另外写的一个显示错误信息的function
        return;
      }

      //获取并记录图片的base64编码
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]); // 读出 base64
      reader.onloadend = function() {
        $(".icon_file").css("display", "none");
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        // console.log(reader);
        var dataURL = reader.result; //base64
        console.log(dataURL);
        that.imageBase64 = dataURL;
        // 显示图片
        $("#showImg").attr("src", dataURL);
      };
    });
    // 表单验证
    $("#username").blur(function() {
      console.log(66);
      var nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      if (nameReg.test(that.username)) {
        $(".icon_username").css("display", "none");
        that.usernameFlag = true;
      } else {
        $(".icon_username").css("display", "block");
      }
    });
    $("#usertel").blur(function() {
      var usertelReg = /^1[3456789][0-9]{9}$/gi; //联系方式
      if (usertelReg.test(that.usertel)) {
        $(".icon_usertel").css("display", "none");
        that.usertelFlag = true;
      } else {
        $(".icon_usertel").css("display", "block");
      }
    });
    $("#cause").blur(function() {
      var causeReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      if (causeReg.test(that.cause)) {
        $(".icon_cause").css("display", "none");
        that.causeFlag = true;
      } else {
        $(".icon_cause").css("display", "block");
      }
    });
    $("#url").blur(function() {
      var urlReg = /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/; //网址地址
      if (urlReg.test(that.url)) {
        $(".icon_url").css("display", "none");
        that.urlFlag = true;
      } else {
        $(".icon_url").css("display", "block");
      }
    });
  },
  methods: {
    submit() {
      console.log(666);
      var that = this;
      if (!this.usernameFlag) {
        $(".icon_username").css("display", "block");
      }
      if (!this.usertelFlag) {
        $(".icon_usertel").css("display", "block");
      }
      if (!this.urlFlag) {
        $(".icon_url").css("display", "block");
      }
      if (!this.causeFlag) {
        $(".icon_cause").css("display", "block");
      }
      if (!this.imageBase64) {
        $(".icon_file").css("display", "block");
      }
      if (
        this.usernameFlag &&
        this.usertelFlag &&
        this.urlFlag &&
        this.causeFlag &&
        this.imageBase64
      ) {
        $.ajax({
          type: "POST",
          url: this.GLOBAL.serverSrc + "/api/postTs",
          header: { "Content-Type": "application/x-www-form-urlencoded" },
          data: {
            name: this.username,
            tel: this.usertel,
            url: this.url,
            info_image: this.imageBase64,
            info: this.cause
          },
          dataType: "json",
          success: function(data) {
            console.log(data);
            if (data.code == 200) {
              console.log(666);
              (that.username = ""),
                (that.usertel = ""),
                (that.url = ""),
                (that.imageBase64 = ""),
                (that.cause = "");
              that.$message({
                showClose: true,
                message: "提交成功",
                type: "success"
              });
              // $(".image613").attr("src", data.data.qrCode);
              // that.dialogFormVisible1 = true; //二维码弹框
              setTimeout(() => {
                window.location.reload();
              }, 2000);
            } else {
              that.$message({
                showClose: true,
                message: data.message,
                type: "error"
              });
            }
          }
        });
      }
    }
  }
};
</script>

<style scoped>
@media screen and (min-width: 1024px) {
  .mine {
    /* height: 996px; */
    background-color: #f1f4f9;
    padding-bottom: 30px;
  }
  .w1398 {
    width: 1398px;
    margin: auto;
    display: flex;
  }
  .showImg {
    margin-left: 150px;
  }
  .caidan_m {
    display: none;
  }
  .caidan_p {
    width: 12%;
    text-align: center;
    margin-top: 40px;
  }
  .menu ul li {
    line-height: 50px;
  }
  .menu ul li:hover {
    color: red;
    background: url(../assets/image/icon_50.png) no-repeat 30px center;
  }
  .w1398 > .right {
    width: 1217px;
    /* height: 901px; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    margin-top: 31px;
    padding-left: 40px;
    box-sizing: border-box;
    padding-right: 60px;
    padding-bottom: 30px;
  }
  .w1398 > .right h2 {
    font-size: 20px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    margin: 20px 0;
  }
  .right p:nth-child(2) {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    text-indent: 35px;
  }
  .right p:nth-child(3) {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    text-indent: 35px;
    margin: 10px 0;
  }
  .right p:nth-child(3) span {
    color: red;
  }
  label {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 40px;
    margin-right: 10px;
  }
  .username {
    text-indent: 35px;
  }
  .username input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .usertel {
    text-indent: 35px;
    margin-top: 24px;
  }
  .usertel input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .xinxi {
    margin: 30px 0;
    text-indent: 35px;
  }
  .content {
    text-indent: 35px;
    overflow: hidden;
  }

  .content textarea {
    width: 660px;
    height: 95px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;

    padding-left: 20px;
    padding-top: 17px;
    box-sizing: border-box;
  }
  .www {
    text-indent: 35px;
    margin-top: 30px;
  }
  .www input {
    width: 345px;
    height: 50px;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 17px;
    box-sizing: border-box;
  }
  .data {
    margin: 30px 0;
    overflow: hidden;
  }
  .data label {
    float: left;
  }
  .data input {
    opacity: 0;
    width: 92px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    left: 0;
  }
  .data .file {
    width: 92px;
    height: 40px;
    border: 1px solid rgba(220, 220, 220, 1);
    background: linear-gradient(
      0deg,
      rgba(234, 234, 234, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    border-radius: 6px;
    /* display: inline-block; */
    cursor: pointer;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 40px;
    text-align: center;
    float: left;
    position: relative;
  }
  .data span {
    display: inline-block;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 40px;
    margin-left: 17px;
  }
  .right > img {
    max-width: 150px;
    display: block;
    margin: auto;
  }
  .xinxi span {
    color: red;
  }
  .code label {
    display: inline-block;
    text-indent: 14px;
  }
  .code {
    text-indent: 35px;
  }
  .code .verify-wrap {
  }
  .code .verify-wrap {
    display: inline-block;
    margin-left: -5px;
    transform: translateY(18px);
  }
  button {
    width: 153px;
    height: 48px;
    background: rgb(174, 176, 177);
    border-radius: 24px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
    margin: 36px 0 0 120px;
    border: none;
    cursor: pointer;
    outline: none;
    /* opacity: 0.5; */
  }
  .icon {
    color: red;
    margin-left: 130px;
    display: none;
  }
  .icon i {
    display: inline-block;
    background: url(../assets/image/icon_22.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
@media screen and (min-width: 320px) and (max-width: 1024px) {
  .mine {
    /* height: 10.5rem; */
    background-color: #f1f4f9;
  }
  .w1398 {
    /* width: 1398px;
    margin: auto; */
    display: flex;
  }
  .showImg {
    margin-left: 0.6rem;
  }
  .caidan_p {
    display: none;
  }
  .menu {
    width: 20%;
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.16rem;
  }
  .menu ul li {
    line-height: 0.5rem;
  }
  .menu ul li:hover {
    color: red;
    background: url(../assets/image/icon_50.png) no-repeat 0.3rem center;
  }
  .w1398 > .right {
    /* width: 77%; */
    /* height: 901px; */
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    /* margin-top: 0.31rem; */
    padding: 0.4rem;
    box-sizing: border-box;
    /* padding-right: 0.6rem; */
    margin: 3%;
    /* margin-bottom: 0.2rem; */
  }
  .w1398 > .right h2 {
    font-size: 0.2rem;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    margin: 0.2rem 0;
  }
  .right p:nth-child(2) {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    text-indent: 0.35rem;
  }
  .right p:nth-child(3) {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    /* text-indent: 0.35rem; */
    margin: 10px 0;
  }
  .right p:nth-child(3) span {
    color: red;
  }
  label {
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(77, 77, 77, 1);
    line-height: 0.4rem;
    margin-right: 0.1rem;
  }
  .username {
    text-indent: 0.35rem;
    width: 100%;
    margin-top: -0.3rem;
  }
  .username input {
    /* width: 3.45rem; */
    margin-left: -0.2rem;
    width: 60%;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .usertel {
    text-indent: 0.35rem;
    margin-top: -0.3rem;
    /* margin-top: 0.24rem; */
  }
  .usertel input {
    /* width: 3.45rem; */
    margin-left: -0.2rem;
    width: 60%;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .xinxi {
    margin: 0.3rem 0;
    /* text-indent: 0.35rem; */
    font-size: 0.16rem;
  }
  .content {
    text-indent: 0.35rem;
    overflow: hidden;
  }

  .content textarea {
    /* width: 6.6rem; */
    width: 60%;
    height: 1.2rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;

    padding-left: 0.2rem;
    padding-top: 0.17rem;
    box-sizing: border-box;
  }
  .www {
    text-indent: 0.35rem;
    margin-top: 0.2rem;
    margin-top: -0.3rem;
  }
  .www input {
    /* width: 3.45rem; */
    margin-left: -0.28rem;
    width: 60%;
    height: 0.5rem;
    background: rgba(241, 244, 249, 1);
    border: 1px solid rgba(220, 220, 220, 1);
    border-radius: 6px;
    padding-left: 0.17rem;
    box-sizing: border-box;
  }
  .data {
    margin: 0.3rem 0;
    font-size: 0.16rem;
    overflow: hidden;
  }
  .data label {
    float: left;
  }
  .data input {
    opacity: 0;
    width: 0.92rem;
    height: 0.4rem;
  }
  .data .file {
    width: 0.92rem;
    height: 0.4rem;
    border: 1px solid rgba(220, 220, 220, 1);
    background: linear-gradient(
      0deg,
      rgba(234, 234, 234, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    border-radius: 6px;
    /* display: inline-block; */
    cursor: pointer;
    font-size: 0.14rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(128, 128, 128, 1);
    line-height: 0.4rem;
    text-align: center;
    float: left;
  }
  .data span {
    display: inline-block;
    font-size: 0.14rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.4rem;
    width: 1.8rem;
    margin-left: 0.3rem;
    /* margin-left: 0.17rem; */
  }
  .xinxi span {
    color: red;
  }
  .code {
    text-indent: 0.35rem;
    overflow: hidden;
    line-height: 0.1rem;
    text-indent: 0.6rem;
  }
  .code label {
    position: relative;
    top: 0.2rem;
  }
  .code .verify-wrap {
    margin-top: 0.2rem;
    left: 0.5rem;
    top: -0.6rem;
  }

  button {
    width: 1.53rem;
    height: 0.48rem;
    background: rgb(175, 177, 179);
    border-radius: 0.24rem;
    font-size: 0.16rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 0.4rem;
    margin: 0.36rem 0 0 1.56rem;
    border: none;
    cursor: pointer;
    outline: none;
    transform: translateY(-0.3rem);
    display: block;
    margin: 0 auto;
  }
  #showImg {
    /* margin-left: 0.6rem; */
    display: block;
    margin: 0 auto;
  }
  .icon {
    color: red;
    margin-left: 0.2rem;
    font-size: 0.2rem;
    display: none;
    margin-left: 1.6rem;
  }
  .icon i {
    display: inline-block;
    background: url(../assets/image/icon_22.png) no-repeat center center;
    background-size: 100%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
</style>

